<template>
	<el-tooltip v-model="validateFlag" :manual="true" :placement="placement" :content="validateMessage" popper-class="wind-validate-popover">
		<slot></slot>
	</el-tooltip>
</template>
<script>
/**
 * Validate by shang 2020/11/19
 * @desc Validate 校验提示
 */
export default {
	name: 'wind-validate',
	props: {
		placement: {
			type: String,
			default: 'top'
		}
	},
	data () {
		return {
			validateFlag: false,
			validateMessage: ''
		}
	},
	methods: {
		show (message) {
			this.validateMessage = message
			this.validateFlag = true
		},
		clear () {
			this.validateMessage = ''
			this.validateFlag = false
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '../../style/varsty.styl'
</style>
<style lang="stylus">
@import '../../style/varsty.styl'
.wind-validate-popover {
	background-color: $wind-validate-popover-background-color !important;
    color: $wind-validate-popover-color !important;
	.popper__arrow {
		border-top-color: $wind-validate-popover-background-color !important
		&::after {
			border-top-color: $wind-validate-popover-background-color !important
		}
	}
}
</style>
